<template>
	<div class="h-[50px] bg-bg-3 rounded px-2 flex items-center app-bg-react" @click="onClick(data)">
		<base-image :src="data.icon" type="server" default="sports/nation-default" class="h-[22px]" />
		<div class="ml-3 flex-1 w-1 text-sm">
			<div class="flex items-center text-t-2">
				<span class="sport">{{ enumName(SportsType, data.sportId) }}</span>
				<base-icon name="superior3" class="mx-1 rotate-90"></base-icon>
				<span class="region">{{ data.regionName }}</span>
			</div>
			<div class="text-t-1">
				{{ data.leagueName }}
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { LeagueType } from '@/types'
import { BaseImage, BaseIcon } from '@/components/base'
import { enumName, goSportsLeague } from '@/utils'
import { SportsType } from '@/enums'
defineProps({
	data: {
		type: Object as PropType<LeagueType>,
		required: true
	}
})

const onClick = (item: LeagueType) => goSportsLeague(item.sportId, item.leagueId)
</script>
